<template>
    <!-- 主题类型：文章、资讯、图集 -->
    <div class="list-article-component-container">
        <div class="list-article-component-item-single" v-if="info.content.coverType==1 || info.content.coverType==4">
            <!-- 单图或无图 -->
            <div class="list-article-component-item-single-bob">
                <a class="list-article-component-title-single" :href="info.content.shareUrl">
                    {{info.content.title}}
                </a>
                <div class="single-component-takeup"></div>
                <router-link class="list-article-component-info-single"
                             :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                    <div class="floatL">
                        {{info.content.channelName}}
                    </div>
                    <div class="floatR">{{this.toCommonTime(info.content.sorttime)}}</div>
                    <div class="clearBoth"></div>
                </router-link>
            </div>
            <a class="list-article-component-img-single" v-if="info.content.thumb" :href="info.content.shareUrl">
                <img v-lazy="addCmdUrl(info.content.thumb,400,100)"/>
            </a>
            <div class="clearBoth"></div>
        </div>
        <div class="list-article-component-item-big" v-if="info.content.coverType==2">
            <!-- 大图 -->
            <a class="list-article-component-title-big" :href="info.content.shareUrl">{{info.content.title}}</a>
            <a class="list-article-component-img-big" :href="info.content.shareUrl" v-if="info.content.coverType==2">
                <img v-lazy="addCmdUrl(info.content.bigimage,600,100)"/>
            </a>
            <router-link class="list-article-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                <div class="floatL">
                    {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>
                <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-article-component-item-triple" v-if="info.content.coverType==3">
            <!-- 多图 -->
            <a class="list-article-component-title-triple" :href="info.content.shareUrl">
                {{info.content.title}}
            </a>
            <a class="list-article-component-img-triple" :href="info.content.shareUrl"
               v-for="(pic,index) in info.content.spacepic">
                <img v-lazy="addCmdUrl(pic.image,600,100)"/>
            </a>
            <div class="clearBoth"></div>
            <router-link class="list-article-component-info-triple"
                         :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                <div class="floatL">
                    {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>
                <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .list-article-component-container {
    }

    .list-article-component-item-single,
    .list-article-component-item-big,
    .list-article-component-item-triple {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
    }

    .list-article-component-item-single {
        box-sizing: border-box;
        padding-right: 7.2rem;

    }

    .list-article-component-title-single,
    .list-article-component-title-big,
    .list-article-component-title-triple {
        font-size: 1.0rem;
        line-height: 1.3rem;
        max-height: 2.6rem;
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-decoration: none;
    }

    .list-article-component-item-single-bob {
        width: 100%;
        height: 4.6rem;
        position: relative;
    }

    .list-article-component-title-single {
        /*line-height: 1.75rem !important;*/
        /*height: 3.5rem;*/
        /*max-height: 3.5rem !important;*/
    }

    /* 单图图片部分 */
    .list-article-component-img-single {
        width: 6.9rem;
        height: 4.6rem;
        position: absolute;
        display: block;
        right: 0;
        top: 0.4rem;
    }

    .list-article-component-img-single img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .list-article-component-title-big,
    .list-article-component-title-triple {
        width: 100%;
    }

    /* 多图和大图部分 */
    .list-article-component-info-single,
    .list-article-component-info-big,
    .list-article-component-info-triple {
        font-size: 0.5rem;
        color: #999999;
        line-height: 1.1rem;
        display: block;
    }

    .list-article-component-info-single {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .list-article-component-img-big {
        width: 100%;
        position: relative;
        padding-bottom: 40%;
        margin: 0.3rem auto;
        display: block;
    }

    .list-article-component-img-triple {
        width: 32.333%;
        margin: 0.3rem 0.5%;
        padding-bottom: 21.566%;
        float: left;
        position: relative;
    }

    .list-article-component-img-big img,
    .list-article-component-img-triple img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .list-article-component-info-single .floatL {
        float: left;
        width: 65%;
        padding-right: 5px;
        box-sizing: border-box;
        color: #B3B3B3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-article-component-info-single .floatR {
        float: left;
        width: 35%;
        box-sizing: border-box;
        text-align: right;
        color: #B3B3B3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.3rem;
    }
</style>